<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       
       <meta name="copyright" content="Copyright (c) Alexander Bell. All rights reserved." />
       
        <meta name="Keywords" content="Alexander Bell, Infosoft International, USA,
        Microsoft, Silverlight, WPF, WCF, WF, Clock, Analog Clock, Hybrid Clock, Digital Clock, 
        Web 2.0, RIA, IT, Software, Development, .NET, ASP, ASP.NET, C#, VC, VB, SQL, Java" />
        
        <meta name="Description" content="Alexander Bell, Consulting, Microsoft,
        Silverlight, Clock, Analog Clock, Hybrid Clock, Digital Clock, Web 2, RIA,
        IT, Software, Development, Microsoft, .NET, ASP, C#, VC, VB, SQL, Java" />
        
        <title>Hybrid Clock by Alexander Bell</title>
        
        
        <script type="text/javascript" src="js/Silverlight.js"></script>
        
        <script type="text/javascript" src="js/DateTime.js"></script>
        <script type = "text/javascript"  src = "js/DigiClock.js"></script>	        
        
        <script type="text/javascript" src="js/HybridClock.js"></script>
        <script type="text/javascript" src="js/HybridClockExt.js"></script>        
        
        <style type="text/css">
            .Header1
            {
                font-size: 16px;
                font-weight: bold;
            }

        </style>
    </head>
    
    <body onload="CreateSilverlightClock()" 
          onunload="StopSilverLightDigitalTimeDate()">
         
         <bgsound src= 'Sounds/Wow.wav' loop='1' volume='-500' />
         
         <div  style="font-size:14px; font-family:Calibri; background-color:#CCCCCC; 
               margin-left:15%; padding:8px; top:10px; width:70%; height: 100%" >
            
                <div id="HybridClock" 
                    style="position:relative;
                    float: left;
                    width:290px; 
                    height: 200px; 
                    padding:10px" 
                    title="Hybrid Clock for Silverlight 2.0 by Alexander Bell"> 
                </div>
            
            
             <div style ="font-size: 18px; font-weight:bold; text-align:left">
                 Hybrid Clock for Microsoft Silverlight 2.0
             </div>
             <div style ="font-size: 14px; font-weight:normal;">
                  by Dr. Alexander Bell, NY, USA 
                  (<a href="http://www.alexanderbell.us" target="_blank">
                  www.alexanderbell.us</a>)
             </div>
             <br />
             
            <div style ="font-size: 12px; font-weight:normal; text-align:left">
                 
               <span class="Header1">Overview: </span>This document describes the Hybrid Clock 
                for Microsoft Silverlight 2.0. Originaly created by Microsoft as analog clock 
                for Silverlight 1.0 [1], it was upgraded by Dr. Alexander Bell (NY, USA) 
                to work with Silverlight 2.0 [2,3]. This revised version
                (see the working DEMO to the left) combines "the best of both worlds", 
                namely: digital and analog UI components. Its original analog design [1] 
                was enhanced by embedding the Date/Time digital scale into clock's face layout. 
                Clock's readings are dynamically updated every 1 sec; time granularity of 
                its digital scale could be reduced to 0.1 sec and further upon necessity.
                The list of enhancement also includes the animated resizing feature, 
                which properties could be set separately for X or Y axes. 
                <br />
                <br />
                At the core of digital scale is the <b>DateTime.js</b> module, included in this package. 
                It has the value of its own, allowing web developers to add the virtual high-resolution 
                Digital Clock to essentially any type of HTML elements, which supports the innerHTML 
                property (see the working sample below). 
                <br />
                <hr />
                <table style="width:100%; padding:5px">
                     <tr>
                         <td valign="top" width="300">
                             <span class="Header1">Package: </span>                
                             Hybrid Clock 2.0 package includes several core components:<br />
                             <br />
                             1. <b>HybridClock.xaml</b> file located in <b>xaml</b> folder:      
                             <br />
                             <br />
                             2. Script files located in <b>js</b> folder<br />
                                <br />
                                <b>
                                &nbsp;&nbsp;&nbsp; - Silverlight.js (V 2.0)
                                <br />
                                <br />
                                &nbsp;&nbsp;&nbsp; - DateTime.js
                                <br />
                                <br />
                                &nbsp;&nbsp;&nbsp; - HybridClock.js
                                <br />
                                <br />
                                &nbsp;&nbsp;&nbsp; - HybridClockExt.js
                                </b>
                             <br />
                             
                             <hr />
                             Note: In order to run the Hybrid Clock, shown above 
                             you should have Microsoft Silverlight 2.0 plug-in 
                             installed on your computer. For more information please 
                             refer to [2,3].
                             <br />
                             <hr />
                             
                             <b>High-Resolution Digital Clock</b>: 
                             DateTime.js module, accompanying this design,
                             allows adding virtual digital clock to essentially any HTML 
                             element, which supports innerHTML property. An example of 
                             using DIV tag is shown below:
                            <br />
                            <br />
                            <div id="digiTime" style="position:relative; width:275px;
                                border: solid 2px Maroon; color:Maroon; font-size:16px;
                                text-align:center; padding: 10px;"
                                title="High-Resolution Digital Clock by Alexander Bell"> 
                            </div>
                            <hr />
                            
                            <span class="Header1">References</span>
                             <br />
                             <br />
                             1. <a href="http://silverlight.net/samples/1.0/clock/default.html" target="_blank">
                             http://silverlight.net/samples/1.0/clock/default.html</a>
                             <br />
                             2. <a href="http://www.microsoft.com/silverlight" target="_blank">http://www.microsoft.com/silverlight</a>
                             <br />
                             3. <a href="http://silverlight.net" target="_blank">http://silverlight.net</a>
                             <br />

                         </td>
                         
                         <td valign="top" width="2"></td>
                         <td valign="top">
                 
                            <span class="Header1">Usage: </span>
                             To add Hybrid Clock to web page (either .htm or .aspx) follow the steps:
                             
                             <br />
                             <br />
                             1. Create <b>&quot;xaml&quot;</b> and <b>&quot;js&quot;</b> 
                             folders in your web root application directory and copy the core 
                             components listed in section "Package"
                             
                             <br />
                             <br />
                             
                             2. Add the references to <b>.js</b> files to the <b>&lt;head&gt;</b> section of the web page 
                             as shown below (note: proper tags should be added):
                             <br />
                             &nbsp; &lt;script type="text/javascript" src="js/Silverlight.js" &gt;&lt;/script&gt;
                             <br />
                             &nbsp; &lt;script type="text/javascript";&nbsp; src="js/DateTime.js" &gt;&lt;/script&gt;
                             <br />
                             &nbsp; &lt;script type="text/javascript" src="js/HybridClock.js" &gt;&lt;/script&gt;
                             <br />
                             &nbsp; &lt;script type="text/javascript"src="js/HybridClockExt.js" &gt;&lt;/script&gt;
                             
                             <br />
                             <br />

                             3. Create <b>&lt;div&gt;</b> element on the page and assign it the <b>id="ClockHost"</b>. Add function 
                             references to <b>onload </b>and <b>onunload </b>event of the opening body tag as show below:
                             <br />
                             &nbsp; &lt;body onload="CreateSilverlightClock(); StartDigitalClock()" 
                                          onunload="StopDigitalClock(); StopSilverLightDigitalTimeDate()"&gt;
                             
                             <br />
                             <br />

                             5. Run your page to see the Hybrid Clock working.
                             Customize (optionally) animated resizing effect by modifying 
                             the values of following properties in <b>HybridClock.js</b> file, e.g:
                             <br />
                                &nbsp;var scaleXfrom = 0;
                                <br />
                                &nbsp;var scaleXto =0.7;
                                <br />
                                &nbsp;var scaleXdur = "00:00:02";
                                <br />
                                &nbsp;var scaleYfrom = 0;
                                <br />
                                &nbsp;var scaleYto = 0.7;<br />
                                &nbsp;var scaleYdur = "00:00:01";
                            
                            <br />
                            <br />
                            
                            7. Logo customization (currently showing "Alex Bell") could be done 
                            by modifying the following section in <b>HybridClock.xaml</b> file:
                            <br />
                            &nbsp;TextBlock x:Name="clockLogo"
                            <br />
                            &nbsp;FontFamily ="Calibri"
                            <br />
                            &nbsp;FontWeight="Light"
                            <br />
                            &nbsp;FontSize="16"
                            <br />
                            &nbsp;Foreground="Silver"
                            <br />
                            &nbsp;Opacity="0.5"
                            <br />
                            &nbsp;Canvas.Top="70"
                            <br />
                            &nbsp;Canvas.Left="115"
                            <br />
                            &nbsp;Text="Alex Bell">
                        </td>
                     </tr>
                 </table>
                 <hr />
                 <div style="text-align:center">
                    Copyright &copy; 2008 Alexander Bell. All Rights Reserved. 
                </div>
             </div>
        </div>
    </body>
</html>
